<template>
  <div class="select-view">
    <div class="box">
      <span class="title">猫眼电影</span>
      <i> <button class="btn">&lt;</button> </i>
    </div>

    <div class="movie-container">
      <label>选择电影</label>
      <select id="movie" v-model="danPrice">
        <option value="10">熊出没之过年（￥10）</option>
        <option value="20">釜山行（￥20）</option>
        <option value="30">奥特银河格斗（￥30）</option>
        <option value="40">哥斯拉大战金刚（￥40）</option>
      </select>
    </div>
    <ul class="showcase">
      <li>
        <div class="seat"></div>
        <small>可选的</small>
      </li>
      <li>
        <div class="seat seatshow"></div>
        <small>已被选择</small>
      </li>
    </ul>
    <div class="seat-container">
      <div class="screen"></div>

      <div class="row">
        <div
          class="seat"
          :class="{ selected: checkedIds.includes(item.id) }"
          v-for="item in filterButtons1"
          :key="item.id"
          @click="fn(item.id)"
        ></div>
      </div>

      <div class="row">
        <div
          class="seat"
          :class="{ selected: checkedIds.includes(item.id) }"
          v-for="item in filterButtons2"
          :key="item.id"
          @click="fn(item.id)"
        ></div>
      </div>

      <div class="row">
        <div
          class="seat"
          :class="{ selected: checkedIds.includes(item.id) }"
          v-for="item in filterButtons3"
          :key="item.id"
          @click="fn(item.id)"
        ></div>
      </div>

      <div class="row">
        <div
          class="seat"
          :class="{ selected: checkedIds.includes(item.id) }"
          v-for="item in filterButtons4"
          :key="item.id"
          @click="fn(item.id)"
        ></div>
      </div>

      <div class="row">
        <div
          class="seat"
          :class="{ selected: checkedIds.includes(item.id) }"
          v-for="item in filterButtons5"
          :key="item.id"
          @click="fn(item.id)"
        ></div>
      </div>

      <div class="row">
        <div
          class="seat"
          :class="{ selected: checkedIds.includes(item.id) }"
          v-for="item in filterButtons6"
          :key="item.id"
          @click="fn(item.id)"
        ></div>
      </div>

      <div class="text">
        <p>
          已经选了 {{ num }}
          个座位，共计
          {{ price }}元
        </p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "SelectView",
  data() {
    return {
      danPrice: "",
      checkedIds: [], // 存放多选的id
      filterButtons1: [
        { id: "01" },
        { id: "02" },
        { id: "03" },
        { id: "04" },
        { id: "05" },
        { id: "06" },
        { id: "07" },
        { id: "08" },
      ],
      filterButtons2: [
        { id: "09" },
        { id: "10" },
        { id: "11" },
        { id: "12" },
        { id: "13" },
        { id: "14" },
        { id: "15" },
        { id: "16" },
      ],
      filterButtons3: [
        { id: "17" },
        { id: "18" },
        { id: "19" },
        { id: "20" },
        { id: "21" },
        { id: "22" },
        { id: "23" },
        { id: "24" },
      ],
      filterButtons4: [
        { id: "25" },
        { id: "26" },
        { id: "27" },
        { id: "28" },
        { id: "29" },
        { id: "30" },
        { id: "31" },
        { id: "32" },
      ],
      filterButtons5: [
        { id: "33" },
        { id: "34" },
        { id: "35" },
        { id: "36" },
        { id: "37" },
        { id: "38" },
        { id: "39" },
        { id: "40" },
      ],
      filterButtons6: [
        { id: "41" },
        { id: "42" },
        { id: "43" },
        { id: "44" },
        { id: "45" },
        { id: "46" },
        { id: "47" },
        { id: "48" },
      ],
    };
  },
  computed: {
    num() {
      return this.checkedIds.length;
    },
    price() {
      return this.num * this.danPrice;
    },
  },
  methods: {
    fn(id) {
      const index = this.checkedIds.findIndex((iid) => iid === id);
      if (index > -1) {
        this.checkedIds.splice(index, 1);
      } else {
        this.checkedIds.push(id);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.select-view {
  height: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
  background-color: cadetblue;
  .box {
    height: 50px;
    background-color: #e54847;
    text-align: center;
    line-height: 50px;
    position: relative;
    .title {
      color: #fff;
      font-size: 18px;
    }
    i {
      position: absolute;
      left: 10px;
      color: #fff;
      font-size: 20px;
      .btn {
        background-color: #e54847;
        border: none;
      }
    }
  }
  .movie-container {
    display: flex;
    justify-content: center; /*弹性容器属性*/
    align-items: center; /*弹性布局容器属性*/
    width: 375px;
    height: auto;
    margin: 100px auto 0 auto;
    label {
      color: white;
      font-size: 18px;
      margin-right: 5px;
    }
  }
  .showcase {
    background-color: olive;
    border-radius: 3px;
    display: flex;
    justify-content: space-between;
    list-style-type: none;
    width: 350px;
    margin: 30px auto;
    padding: 5px 10px;
    li {
      color: lightgray;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 10px;
      .seat {
        background-color: darkgrey;
        width: 15px;
        height: 12px;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        margin: 0px 3px;
      }
      .seatshow {
        background-color: salmon;
      }
    }
  }
  .seat-container {
    perspective: 500px;
    .screen {
      margin: 5px auto 20px auto;
      width: 250px;
      height: 60px;
      transform: rotateX(-28deg);
      background-color: snow;
      box-shadow: 0 3px 10px rgba(250, 246, 246, 0.7); /*0.7是不透明度*/
    }
    .row {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 10px;
      .seat {
        background-color: darkgrey;
        width: 30px;
        height: 20px;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        margin: 0px 3px;
      }
      .seat.selected {
        background-color: salmon;
      }
      .seat.seatshow {
        background-color: salmon;
      }
      .seat:nth-last-of-type(2) {
        margin-left: 20px;
      }
      .seat:nth-last-of-type(6) {
        margin-left: 20px;
      }
    }
  }
  .text {
    color: aliceblue;
    font-size: 20px;
    margin: 5px auto;
    text-align: center;
  }
}
</style>
